<template>
  <div class="item-box">
    <div class="sfzcll_box" style="line-height: 58px;">
      <div style="display: flex;">
        <div :class="`icon-size ${iconName}`"></div>
        <div class="ionc-box-text">
          <div class="ygl" style="line-height: 56px;">
            <span>{{ labelName }}</span>
          </div>
        </div>
        <div class="sfzcll_smallBk">
          <div class="ygl" style="line-height: 56px;">
            <span class="n-t-c">{{ labelValue }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps(['labelName', 'labelValue', 'iconName'])
</script>

<style lang="scss" scoped>
.item-box {
  .n-t-c {
    font-size: 20px;
    color: #ffeb7b;
    font-weight: bold;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  }

  .icon-size {
    margin: 5px;
    width: 50px;
    height: 50px;
  }

  .ionc-box-text {
    width: 4.88vw;
    font-size: 18px;
    color: #fff;
    text-align: center;
  }

  .icon-box-1 {
    background: url(/src/assets/wbe4/bsrr1.png) no-repeat;
    background-size: cover;
  }

  .icon-box-2 {
    background: url(/src/assets/wbe4/bsrr2.png) no-repeat;
    background-size: cover;
  }

  .icon-box-3 {
    background: url(/src/assets/wbe4/bsrr3.png) no-repeat;
    background-size: cover;
  }

  .icon-box-4 {
    background: url(/src/assets/wbe4/bsrr4.png) no-repeat;
    background-size: cover;
  }

  .sfzcll_box {
    width: 100%;
    height: calc(33% - 15px);
    line-height: 5;
    background: rgba(15, 47, 72, 0.8);
    border: 1px solid #1380bd;
    position: relative;
    margin-bottom: 0.5vh;
  }

  .sfzcll_bkJk {
    position: absolute;
  }

  .sfzcll_bkJk:first-of-type {
    top: -2px;
    left: -2px;
  }

  .sfzcll_bkJk:nth-child(2) {
    top: -2px;
    right: -2px;
  }

  .sfzcll_bkJk:nth-child(3) {
    bottom: -2px;
    right: -2px;
  }

  .sfzcll_bkJk:nth-child(4) {
    bottom: -2px;
    left: -2px;
  }

  .sfzcll_smallBk {
    width: 33%;
    height: 100%;
    padding: 2px 5px;
  }

  .sfzcll_smallBk>div {
    height: 100%;
    background: url(/src/assets/wbe4/r-l-t-i.png) no-repeat;
    background-size: 100% 100%;
    text-align: center;
    line-height: 1.5em;
    // background: rgba(15, 47, 72, 0.8);
    // border: 1px solid #1380bd;
  }

  .sfzcll_smallBk .ygl {
    color: #00ffc6;
  }

  .sfzcll_smallBk .ygh {
    color: #ffe400;
  }
}
</style>
